@primary-color: #1890ff;
@dark-background-color: darken(#333, 5%);
@dark-text-color: #fff;
@dark-border-color: #555;

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  transition: background-color 0.3s, color 0.3s;
}

body {
  font-size: 14px;
  background-color: #f9f9f9;

  &.dark-mode {
    background-color: @dark-background-color;
    color: @dark-text-color;
  }
}

.tabs-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.tabs-items-container {
  display: flex;

  .tabs-header-item {
    position: relative;
    margin-right: 20px;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s;

    &:hover,
    &.is-active {
      color: @primary-color;

      &:after {
        border-bottom: 2px solid @primary-color;
        content: '';
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -1px;
      }
    }
    body.dark-mode & {
      color: @dark-text-color;
      &:hover,
      &.is-active {
        color: lighten(@primary-color, 20%);

        &:after {
          border-bottom: 2px solid lighten(@primary-color, 20%);
        }
      }
    }
  }
}

.example {
  padding: 0 20px;

  > h1 {
    text-align: center;
  }

  > p {
    margin: 20px 20px 20px 0;
    color: #8c8c8c;
  }
}

.example-box {
  display: flex;
  gap: 60px;

  .title {
    text-align: center;
  }

  .block {
    flex: auto;
    &:first-child {
      flex: 0 0 450px;
    }
  }

  input,
  select,
  textarea {
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #bbb;
    font-family: inherit;
    &:focus {
      outline: none;
      border-color: @primary-color;
      box-shadow: 0 0 3px @primary-color;
    }
  }

  textarea {
    width: 100%;
    height: 150px;
    resize: vertical;
  }

  pre {
    margin: 0;
    font-family: Consolas;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dark-textarea {
  background-color: #333;
  color: #fff;
  border-color: #444;
}
